<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .scroll{
        transform: translateX(10000%);
        }
        @keyframes bounceInRight { from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);} 
    /* 0% {opacity: 0;transform: translate3d(2000px, 0, 0);}  */
    60% {opacity: 1;transform: translate3d(-25px, 0, 0);} 
    75% {transform: translate3d(10px, 0, 0);} 
    90% {transform: translate3d(-5px, 0, 0);} 
    100% {opacity: 1;transform: none;}}

.yidong{
    /* width: auto;                                             */
    /* display: inline-block; */
    animation: bounceInRight 1.5s 0.25s linear forwards;

}
    </style>
  </head>
  <body>
  
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script>
      window.onload=function(){
        const boxs=document.querySelectorAll('.scroll')
        console.log(boxs);
        const triggerBottom = window.innerHeight 
    window.addEventListener('scroll', scrolls)
      scrolls()
      function scrolls(){
     for(var i=0;i<boxs.length;i++){
      const boxTop = boxs[i].getBoundingClientRect().top
      if(boxTop<triggerBottom){
              
        boxs[i].classList.add('yidong')
        }
     }
        }

      }

    </script>
  </body>
</html>
